<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="__PUBLIC__/admin/sncss/css/style.css" rel="stylesheet" type="text/css" />
<!-- <script type="text/javascript" src="__PUBLIC__/admin/sncss/js/jquery.js"></script> -->
<style type="text/css">
#list li {height: 35px;}
#list li .lidiv {height: 35px; font-size:12px;line-height: 35px;text-indent: 11px;border-bottom: 1px solid rgb(200, 216, 233); text-align:left;float: left;}
.catename1 {width: 5%;}
.catename2 {width: 20%;}
.catename3 {width: 30%;}
.catename4 {width: 5%;}
.catename5 {width: 10%;}
.catename6 {width: 20%;}
.catename7 {width: 5%;}
.catename8 {width: 5%;}
</style>
</head>
<body>

	<div class="place">
		<span>位置：</span>
		<ul class="placeul">
		<li><a>首页</a></li>
		<li><a>背景音管理</a></li>
		<li><a>背景音列表</a></li>
		</ul>
		</div>

		<div class="rightinfo">
		<div class="tools">

		<form id="form2" name="form2" method="get" action="{:U('/Home/Bgm/bgmlist')}">
			<div style="float: left;">
				<select class="newselect" id="u1_input" name="type" >
					<?php foreach ($bgmclass as $key => $value) {?>
					<option  value="<?php echo $value['id'];?>" <?php if($type == $value['id']){echo "selected='selected'";}?>><?php echo $value['cname'];?></option>
					<?php }?>
				</select>
			</div>
			<div style="float: left; margin-bottom: 15px;">
				<input name="" style="height: 36px;" type="submit" class="btn" value="搜索"/>
			</div>
		</form>

		</div>
		<form id="form1" runat="server">
	<div> 拖动时同时更新数据库数据：
		<input type="checkbox" id="check" />
	<span id="show"></span>
	</div>
		<table class="tablelist">
			<thead>
			<tr>
				<th class="catename1">ID</th>
				<th class="catename2">名称</th>
				<th class="catename3">音频</th>
				<th class="catename4">分类</th>
				<th class="catename5">使用次数</th>
				<th class="catename6">添加时间</th>
				<th class="catename7">状态</th>
				<th class="catename8">操作</th>
				</tr>
				</thead>
		</table>
		<div>
		<input type="hidden" id="orderlist" />
		<ul id="list">
			<foreach name='bgmlist' item='vo' key='key'>
			<li id="{$vo.id}" title="{$vo.sortid}">
			<div class="lidiv catename1">{$vo.id}</div>
			<div class="lidiv catename2">{$vo.name}</div>
			<div class="lidiv catename3"><audio src="{$vo.audio}" controls="controls"></audio></div>
			<div class="lidiv catename4">{$vo.cname}</div>
			<div class="lidiv catename5">稍后补上</div>
			<div class="lidiv catename6">{$vo.time}</div>
			<div class="lidiv catename7">{$vo.typename}</div>
			<div class="lidiv catename8">
				<if condition="$vo['type'] == 1">
					<a style="color:#50A8E6;" href="javascript:;" id="{$vo.id}" onclick="showhide(this);">隐藏</a>
						<else />
						<a style="color:#50A8E6;" href="javascript:;" id="{$vo.id}" onclick="showhide(this);">恢复</a>
				</if>
				<input type="hidden" name="" id="t{$vo.id}" value="{$vo.type}">
			</div>
			</li>
			</foreach>
		</ul>
</div>
</form>
</div>
<div class="pages"><br />
			<div align="right"><br><br><br><br>{$page}</div>
		</div>
</body>
<script type="text/javascript">
	function showhide(obj){
			var mymessage=confirm("是否确认隐藏(显示)");
			if(mymessage==true)
			{
					var id = obj.id;
					window.location.href = '/Home/Bgm/ShowHideBgm?id='+obj.id+'&type='+$('#t'+obj.id).val();
			}
	}
</script>
<script src="__PUBLIC__/admin/Js/jquery.min.js"></script>
<script src="__PUBLIC__/admin/Js/jquery-ui.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {

        //保存常用选择器
        var list = jQuery("#list"); //ul
        var show = jQuery("#show"); //输出提示
        var orderlist = jQuery("#orderlist");   //原顺序
        var check = jQuery("#check");   //是否更新到数据库
        //保存原来的排列顺序
        var order = [];
        list.children("li").each(function() {
            order.push(this.title); //原排列顺序保存在title，得到后更改title
            jQuery(this).attr("title", "你可以拖动进行排序");
        });
        orderlist.val(order.join(','));
        //ajax更新
        var Update = function(itemid, itemorder) {
            jQuery.ajax({
                type: "post",
                url: "/Home/Bgm/bgm_ajax",
                data: { id: itemid, order: orderlist.val(), cid:<?php echo $type;?> },   //id:新的排列对应的ID,order：原排列顺序
                beforeSend: function() {
                    show.html("正在更新");
                },
                success: function(req) {
                    if (req == "100") {
                        show.html("更新成功");
                    }
                    else if (req == "001") {
                        show.html("失败，请稍后再试");
                    }
                    else {
                        show.html("参数不全");
                    }
                }
            });
        };
        //调用ajax更新方法
        var Submit = function(update) {
            var order = [];
            list.children("li").each(function() {
                order.push(this.id);
            });
            var itemid = order.join(',');
            //如果单选框选中，则更新表中排列顺序
            if (update) {
                Update(itemid);
            }
            else {
                show.html("");
            }
        };


        //执行排列操作
        list.sortable({
            opacity: 0.7,
            update: function() {
                Submit(check.attr("checked"));
            }
        });

    });
</script>
</html>
